<template>
<!--  故障处理率-->
    <div id="gzfxl"></div>
</template>

<script>
import moment from 'moment'
const echarts = require('echarts/lib/echarts')
export default {
  name: 'gzfxl',
  props: ['chart'],
  data() {
    return {
      myChart: null,
      barWidth: 6,
      value: '北京',
      options: [{label:'北京',value: 0}, {label:'上海',value: 1}, {label:'深圳',value: 2}, {label:'成都',value: 3}]
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeFn, true);
    this.myChart?.dispose();
  },
  methods: {
    getChartData(params, series) {
      this.$http.get('/dataView/getAlarmAndFaultData', {
        params
      }).then(res => {
        this.initChart(res, series)
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取故障-告警数据失败')
      })
    },
    initChart(val, series) {
      this.myChart?.dispose();
      let chartDom = document.getElementById('gzfxl');
      if (!chartDom) {return}
      this.myChart = echarts.init(chartDom);
      const guzhang = val.filter(item => item.name === '故障').map(item => {
        const { dataSize, count } = item
        return {
          ...item,
          date: moment(item.date).add(-1, 'days').format('MM/DD'),
          rate: (Math.round(dataSize / count * 10000) / 100).toFixed(2)
        }
      })

      const option = {
        title: {
          text: '故障分析率',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis', // 触发类型，默认数据项触发，可选为：'item' | 'axis'
          formatter: function(params) {
            const { dataIndex } = params[0]
            const item = guzhang[dataIndex] || {}
            const { rate, date, dataSize, count } = item
            // 自定义提示框内容
            return `故障分析率: ${rate}%<br>日期：${date}<br>已分析：${dataSize}<br>总数：${count}`;
          }
        },
        legend: {
          data: ['故障'], // 假设您只有一个系列
          top: 30,
          width: 300,
          left: 30
        },
        xAxis: {
          type: 'category',
          data: guzhang.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '故障',
          type: 'line',
          color: 'rgb( 255,153,187)',
          showSymbol: true, // 确保数据点可见
          data: guzhang.map(item => item.rate),
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#ffdb4d'
              },
              {
                offset: 1,
                color: 'rgb( 255,153,187,0.2)'
              }
            ])
          },
        }].filter(seriesItem => series.includes(seriesItem.name))
      };
      this.myChart.setOption(option);

      option && this.myChart.setOption(option);

      window.addEventListener('resize', this.resizeFn, true);
    },
    // initChart(val, series) {
    //   this.myChart?.dispose();
    //   let chartDom = document.getElementById('gzfxl');
    //   if (!chartDom) {return}
    //   this.myChart = echarts.init(chartDom);
    //   const guzhang = val.filter(item => item.name === '故障').map(item => {
    //     const { dataSize, count } = item
    //     return {
    //       ...item,
    //       date: moment(item.date).add(-1, 'days').format('MM/DD'),
    //       rate: (Math.round(dataSize / count * 10000) / 100).toFixed(2)
    //     }
    //   })
    //
    //   const option = {
    //     title: {
    //       text: '故障分析率',
    //       left: 'left'
    //     },
    //     tooltip: {
    //       trigger: 'axis', // 触发类型，默认数据项触发，可选为：'item' | 'axis'
    //       formatter: function(params) {
    //         const { dataIndex } = params[0]
    //         const item = guzhang[dataIndex] || {}
    //         const { rate, date, dataSize, count } = item
    //         // 自定义提示框内容
    //         return `故障分析率: ${rate}%<br>日期：${date}<br>已分析：${dataSize}<br>总数：${count}`;
    //       }
    //     },
    //     legend: {
    //       data: ['故障'], // 假设您只有一个系列
    //       top: 30,
    //       width: 300,
    //       left: 30
    //     },
    //     xAxis: {
    //       type: 'category',
    //       data: guzhang.map(item => item.date)
    //     },
    //     yAxis: {
    //       type: 'value'
    //     },
    //     series: [{
    //       name: '故障',
    //       type: 'line',
    //       color: 'rgb( 255,153,187)',
    //       showSymbol: true, // 确保数据点可见
    //       data: guzhang.map(item => item.rate),
    //       areaStyle: {
    //         opacity: 0.8,
    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //           {
    //             offset: 0,
    //             color: '#ffdb4d'
    //           },
    //           {
    //             offset: 1,
    //             color: 'rgb( 255,153,187,0.2)'
    //           }
    //         ])
    //       },
    //     }].filter(seriesItem => series.includes(seriesItem.name))
    //   };
    //   this.myChart.setOption(option);
    //
    //   option && this.myChart.setOption(option);
    //
    //   window.addEventListener('resize', this.resizeFn, true);
    // },
    resizeFn() {
      this.myChart.resize();
    }
  }
}
</script>

<style lang="scss" scoped>
#gzfxl {
  width: 100%;
  height: 100%;
}
.select-address {
  width: 6vw;
  position: absolute;
  right: 10vh;
  z-index: 99;
}
</style>
